<style>
.echarts {
  height: 300px;
  width: 100%;
}
</style>
<template>
  <div class="layout-content-body">
    <!--<div class="chart" v-echarts="chartOptions" style="width:100%; height:400px;"></div>-->
    <chart :options="chartOptions" />
    <Row>
      <dtable 
        :columns="columns" 
        :data-all="dataAll" 
        :loading="loading" 
        @refresh="getall()"
      />
    </Row>
  </div>
</template>

<script>
// import echarts from 'echarts'

// import api from '../../api'
// import {mapMutations, mapGetters, mapState} from 'vuex'
// import{inputString} from  '@/common/utils'
import dtable from '@/components/table/dtable.vue';
export default {
  components: {
    dtable
  },
  data () {
    return {
      loading: true,
      columns: [
        {
          title: '单位名称',
          key: 'name',
          sortable: true
        },
        {
          title: '观看次数',
          key: 'clicks',
          sortable: true
        },
        {
          title: '观看时长',
          key: 'looklong',
          sortable: true
        }
      ],
      dataAll: [],
      spinShow: false,
      chartColumn: null,
      chartOptions: {
        title: {
          text: '视频统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0
          }
        },
        //          grid: {
        //            left: '3%',
        //            right: '4%',
        //            bottom: '3%',
        //            containLabel: true
        //          },
        yAxis: {},
        legend: {
          //            data: ['2011年', '2012年','2013年']
        },
        series: [
          {
            name: '观看次数',
            type: 'bar',
            data: []
          },
          {
            name: '观看时长',
            type: 'bar',
            data: []
          }
        ]
      }
    };
  },
  computed: {
    // ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
    filiterTableDate () {
      let e = this.dataAll.slice();
      let keys = this.searchKey;
      let filterData = function (element) {
        if (keys === '') {
          return true;
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true;
          }
        }
        return false;
      };
      let fdata = e.filter(filterData);
      this.total = fdata.length;
      return fdata;
    },
    curTableData () {
      let from = this.pageSize * (this.current - 1);
      let to = from + this.pageSize;
      return this.filiterTableDate.slice(from, to);
    }
  },
  watch: {},
  mounted () {
    this.getall();
  },
  methods: {
    getall () {
      this.loading = true;
      this.$api.StatisticsVideo().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          for (let v in this.dataAll) {
            console.log(this.dataAll[v].name);
            this.chartOptions.xAxis.data.push(this.dataAll[v].name);
            this.chartOptions.series[0].data.push(this.dataAll[v].clicks);
            this.chartOptions.series[1].data.push(this.dataAll[v].looklong);
          }
          this.chartOptions.legend.data = ['观看次数', '观看时长'];
          if (res.Data) {
            this.total = res.Data.length;
          }
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    }
  }
};
</script>
